/**
 * 干线协调优化平台 - 主页交互脚本
 * 负责处理用户交互、导航切换、响应式行为等
 */

class MainPageController {
    constructor() {
        this.init();
    }

    /**
     * 初始化页面控制器
     */
    init() {
        this.bindEvents();
        this.initResponsive();
        this.animateOnLoad();
        console.log('干线协调优化平台主页已加载');
    }

    /**
     * 绑定事件监听器
     */
    bindEvents() {
        // 导航菜单点击事件
        this.bindNavItemEvents();
        
        // Logo点击事件
        this.bindLogoEvent();
        
        // 响应式事件
        this.bindResponsiveEvents();
    }

    /**
     * 绑定导航菜单事件
     */
    bindNavItemEvents() {
        const navItems = document.querySelectorAll('.nav-item');
        
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                
                // 移除所有活跃状态
                navItems.forEach(nav => nav.classList.remove('active'));
                
                // 添加当前活跃状态
                item.classList.add('active');
                
                // 获取操作类型
                const action = item.getAttribute('data-action');
                this.handleNavItemClick(action, item);
            });

            // 添加悬停效果
            item.addEventListener('mouseenter', () => {
                this.addHoverEffect(item);
            });
        });
    }

    /**
     * 处理导航菜单点击
     */
    handleNavItemClick(action, element) {
        // 添加点击动效
        this.addClickEffect(element);
        
        // 根据不同操作执行相应逻辑
        switch(action) {
            case 'greenwave':
                this.openGreenWaveCalculation();
                break;
            case 'tracking':
                this.openTrackingRecords();
                break;
            case 'history':
                this.openHistoricalPlans();
                break;
            default:
                console.warn('未知的菜单操作:', action);
        }
    }

    /**
     * 打开绿波计算模块
     */
    openGreenWaveCalculation() {
        console.log('正在打开绿波计算模块...');
        
        // 显示加载提示
        this.showNotification('正在加载绿波计算模块...', 'info');
        
        // 模拟页面跳转或模块加载
        setTimeout(() => {
            // 这里可以跳转到绿波计算页面或打开模态框
            // window.location.href = 'calculation.html';
            console.log('绿波计算模块加载完成');
            this.showNotification('绿波计算模块已准备就绪', 'success');
        }, 1000);
    }

    /**
     * 打开跟踪记录模块
     */
    openTrackingRecords() {
        console.log('正在打开跟踪记录模块...');
        
        this.showNotification('正在加载跟踪记录...', 'info');
        
        setTimeout(() => {
            console.log('跟踪记录模块加载完成');
            this.showNotification('跟踪记录加载完成', 'success');
        }, 1000);
    }

    /**
     * 打开历史方案模块
     */
    openHistoricalPlans() {
        console.log('正在打开历史方案模块...');
        
        this.showNotification('正在加载历史方案...', 'info');
        
        setTimeout(() => {
            console.log('历史方案模块加载完成');
            this.showNotification('历史方案加载完成', 'success');
        }, 1000);
    }

    /**
     * 绑定Logo点击事件
     */
    bindLogoEvent() {
        const logo = document.querySelector('.layout-logo');
        
        logo.addEventListener('click', () => {
            console.log('返回主页');
            
            // 重置所有导航状态
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(nav => nav.classList.remove('active'));
            
            this.showNotification('已返回主页', 'info');
        });
    }

    /**
     * 绑定响应式事件
     */
    bindResponsiveEvents() {
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            this.handleResize();
        });
    }

    /**
     * 处理窗口大小变化
     */
    handleResize() {
        const width = window.innerWidth;
        
        if (width <= 768) {
            // 移动端调整
            console.log('切换到移动端视图');
        } else {
            // 桌面端调整
            console.log('切换到桌面端视图');
        }
    }

    /**
     * 页面加载动画
     */
    animateOnLoad() {
        // 添加页面加载完成标识
        document.body.classList.add('page-loaded');
        
        // 延迟显示欢迎信息
        setTimeout(() => {
            this.showNotification('欢迎使用干线协调优化平台', 'info');
        }, 1000);
    }

    /**
     * 添加悬停效果
     */
    addHoverEffect(element) {
        // 可以添加自定义悬停效果
        const action = element.getAttribute('data-action');
        console.log('导航菜单悬停:', action);
    }

    /**
     * 添加点击效果
     */
    addClickEffect(element) {
        // 添加点击波纹效果
        element.style.transform = 'scale(0.98)';
        
        setTimeout(() => {
            element.style.transform = '';
        }, 150);
    }

    /**
     * 显示通知消息
     */
    showNotification(message, type = 'info') {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.textContent = message;
        
        // 样式
        Object.assign(notification.style, {
            position: 'fixed',
            top: '80px',
            right: '20px',
            padding: '12px 20px',
            backgroundColor: this.getNotificationColor(type),
            color: 'white',
            borderRadius: '6px',
            fontSize: '14px',
            zIndex: '9999',
            opacity: '0',
            transform: 'translateX(100%)',
            transition: 'all 0.3s ease'
        });

        // 添加到页面
        document.body.appendChild(notification);

        // 显示动画
        setTimeout(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateX(0)';
        }, 100);

        // 自动移除
        setTimeout(() => {
            notification.style.opacity = '0';
            notification.style.transform = 'translateX(100%)';
            
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }

    /**
     * 获取通知颜色
     */
    getNotificationColor(type) {
        const colors = {
            'info': '#2196F3',
            'success': '#4CAF50',
            'warning': '#FF9800',
            'error': '#f44336'
        };
        return colors[type] || colors.info;
    }

    /**
     * 获取当前时间
     */
    getCurrentTime() {
        return new Date().toLocaleTimeString('zh-CN');
    }

    /**
     * 模拟实时数据更新
     */
    startDataUpdates() {
        // 每30秒更新一次状态
        setInterval(() => {
            this.updateSystemStatus();
        }, 30000);
    }

    /**
     * 更新系统状态
     */
    updateSystemStatus() {
        // 这里可以更新状态指示器、实时数据等
        console.log(`系统状态更新 - ${this.getCurrentTime()}`);
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    // 创建主页控制器实例
    window.mainPageController = new MainPageController();
    
    // 开始数据更新
    window.mainPageController.startDataUpdates();
});

// 导出控制器类（如果需要模块化）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = MainPageController;
} 